import { createBehavior, createResource } from '@inbiz/core';
import {
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  createEmptySchema,
  createInbizSchema,
} from '@inbiz/setters';
import { TagsView as LocaleTagsView } from './locale';

// 属性的默认值: defaultProps
export const defaultProps = {
  defaultBg: 'rgba(234,234,234,1)',
  selectBg: 'rgba(255,255,255,1)',
  actions: ['refresh'],
};

// 容器属性：defaultDecoratorProps
const defaultDecoratorProps = {
  style: {
    height: '40px',
  },
};

export const TagsView = createInbizSchema({
  attribute: {
    ...createEmptySchema({
      actions: {
        type: 'array<string>',
        'x-decorator': 'FormItem',
        'x-component': 'Checkbox.Group',
        enum: ['refresh'],
      },
    }),
  },
  style: {
    ...createComponentStyleSchema({
      defaultBg: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'ColorInput',
      },
      selectBg: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'ColorInput',
      },
    }),
    ...createDecoratorStyleSchema(),
  },
});

export const Behavior = createBehavior({
  extends: ['Field'],
  name: 'TagsView',
  selector: (node) => node.props['x-component'] === 'TagsView',
  designerLocales: LocaleTagsView,
  designerProps: {
    propsSchema: TagsView,
  },
});

export const Resource = createResource({
  icon: 'TagsView',
  elements: [
    {
      componentName: 'Field',
      props: {
        title: {
          status: true,
          value: 'TagsView.title',
        },
        type: 'sting',
        title: {
          value: 'TagsView.title',
          status: true,
        },
        'x-decorator': 'Container',
        'x-component': 'TagsView',
        'x-component-props': defaultProps,
        'x-decorator-props': defaultDecoratorProps,
      },
    },
  ],
});
